<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>领取会员卡</title>
		<style>
			.lf-line { border: 1px solid #f2f2f2;}
			.lf-box { height: 100%; background: #fff; margin-top: 30px;}
			.lf-header { margin-top: 30px;}
			.lf-fl { display: flex;}
			.lf-flj {display: flex; justify-content: space-between;}
			.lf-pad-20 { padding: 0 20px;}
			.lf-header > div:first-child {  text-align: center; width: 40px; height:40px; border-radius: 50%; border: 1px solid #37A173; background: #03C05F;}
			.lf-header > div:first-child img { margin-top: 10px;}
			.lf-header > div:last-child { font-size: 14px; line-height: 40px; margin-left: 10px;}
			.lf-input input { background-color: #F7F7F7;  border: none; text-align: right; width:200px; font-size: 14px;}
			.lf-input input:focus { outline: #F7F7F7;}
			.lf-input { font-size: 14px; background: #F7F7F7; border: 1px solid #ECECEC; padding: 0 16px; margin-top: 20px; color: #676767; border-radius: 6px;}
			.lf-input > div { padding: 20px 0}
			.lf-tips {padding: 20px 0; font-size: 12px; color: #676767;}
			.lf-btn { color: #fff; border-radius: 50px; text-align: center; background-color: #03C05F; font-size: 12px; width: 80px; line-height: 24px;}
			.lf-btn-seve { text-align: center; color: #fff; width: 92%; margin: 0 auto; margin-top: 100px; background-color: #03C05F;font-size: 14px; line-height: 36px; border-radius: 20px;}
			.lf-number-keyboard { width: 200px;}
			.lf-number-keyboard > div { padding-right: 18px;  text-align: right; color: #757575; margin-bo}
			.lf-number-keyboard > div > span { position: relative; min-width: 1px; height: 19px;}
			.lf-number-keyboard.active > div > span:after{ content: ''; position: absolute; right: -2px; top:0; height: 20px; width: 1px; background: #000; animation: 1s linear infinite blink; -webkit-animation: 1s linear infinite blink; }
			@keyframes blink{
			    0%{ width: 1px; }
			    49.9999%{ width: 1px; }
			    50%{ width: 0; }
			    100%{ width: 0; }
			}
			@-webkit-keyframes blink{
			    0%{ width: 1px; }
			    49.9999%{ width: 1px; }
			    50%{ width: 0; }
			    100%{ width: 0; }
			}
			.lf-table { border-collapse:collapse; border: 1px solid #ccc; width: 100%; position: fixed; left: 0; bottom: -270px;}
			.lf-table.active { animation: hintPopUp 0.2s 0.2s linear forwards;}
			@keyframes hintPopUp {
				0%{ bottom: -270px}
				50%{ bottom: -135px;}
				100%{ bottom: 0;}
			}
			.lf-table  tr:first-child td { text-align: left; padding-left: 20px;}
			.lf-table tr td { text-align: center; color: #333; border: 1px solid #ddd;  border-collapse: collapse; background-color: #fff; padding: 12px 0; color: #636F61; font-weight: 600; width: 33.333%;  font-size: 14px;}
			/* .lf-tr-money { display: none;} */
			.lf-table .lf-serve { background-color: #00B63F; color: #fff; }
			.lf-table .lf-serve img {vertical-align: middle; margin-right: 4px;}
		</style>
	</head>
	<body style="padding:0; margin: 0; overflow: hidden;" class="lf-body">
		<div class="lf-line"></div>
		<div class="lf-box lf-pad-20">
			<div class="lf-header lf-fl">
				<div>
					<img width="20px" height="20px" src="./shop.png" alt="">
				</div>
				<div>唐鼎石</div>
			</div>
			<div class="lf-input lf-flj">
				<div>消费金额</div>
				<div class="lf-number-keyboard">
					<div><text class="lf-money-tips">请输入消费金额</text><text class="lf-money-number"></text><span></span></div>
				</div>
			</div>
			<div class="lf-tips lf-flj">
				<div style="line-height: 24px;">领取会员卡，享受更多会员权益~~~</div>
				<div class="lf-btn">立即领取</div>
			</div>
			<div class="lf-input lf-flj" style="margin: 0;">
				<div>备注信息</div>
				<input class="input" type="search" placeholder="请输入备注内容">
			</div>
		</div>
		<table class="lf-table">
			<tr class="lf-tr-money"><td colspan="3">实际支付：<span class="lf-money" style="color: #00B63F;">￥0</span></td></tr>
			<tr>
				<td class="lf-td">1</td>
				<td class="lf-td">2</td>
				<td class="lf-td">3</td>
			</tr>
			<tr>
				<td class="lf-td">4</td>
				<td class="lf-td">5</td>
				<td class="lf-td">6</td>
			</tr>
			<tr>
				<td class="lf-td">7</td>
				<td class="lf-td">8</td>
				<td class="lf-td">9</td>
			</tr>
			<tr>
				<td class="lf-td">.</td>
				<td class="lf-td">0</td>
				<td class="lf-delete"><img width="18px" src="./delete.png" alt=""></td>
			</tr>
			<tr>
				<td class="lf-show"><img width="18px" src="./keyboard.png" alt=""></td>
				<td class="lf-serve" colspan="2"><img width="20px" src="./wechat.png" alt="">微信支付</td>
			</tr>
		</table>
		<script src="./jquery-3.5.1.min.js"></script>
		<script>
			// 调取键盘
			$(".lf-number-keyboard").click(function(event) {
				$(".lf-number-keyboard").addClass('active')
				$(".lf-table").addClass('active')
				event.stopPropagation();
			});
			// 清除键盘
			$(".lf-body").click(function() {
				$(".lf-number-keyboard").removeClass('active')
				$(".lf-table").removeClass('active')
			});
			$(".lf-show").click(function() {
				$(".lf-number-keyboard").removeClass('active')
				$(".lf-table").removeClass('active')
			});
			// 获取页面高度
			$(document).ready(function(){
				$('.lf-body').css('height', $(window).height()+ 'px')
			});
			// 领取会员
			$('.lf-btn').click(function() {
				
			});
			// 数字键盘点击
			$('.lf-td').click(function(event) {
				$('.lf-number-keyboard .lf-money-number').html($('.lf-number-keyboard .lf-money-number').html() + $(this).html());
				$('.lf-number-keyboard .lf-money-tips').html('￥');
				$('.lf-tr-money .lf-money').html('￥' + $('.lf-number-keyboard .lf-money-number').html());
				event.stopPropagation();
			});
			// 删除
			$('.lf-delete').click(function(event) {
				let data = $('.lf-number-keyboard .lf-money-number').html();
				data = data.substr(0, data.length-1)
				$('.lf-number-keyboard .lf-money-number').html(data);
				$('.lf-tr-money .lf-money').html('￥' + data);
				if(!data) {
					$('.lf-number-keyboard .lf-money-tips').html('请输入消费金额');
					$('.lf-tr-money .lf-money').html('￥' + 0);
				}
				event.stopPropagation();
			});
			// 微信支付
			$('.lf-serve').click(function() {
				$(".lf-number-keyboard").removeClass('active')
				$(".lf-table").removeClass('active')
				
			});
			
		</script>
	</body>
</html>
